import React, {Component} from 'react'
import { connect } from 'dva';
import Footer from '../components/Footer';
import Classlist from '../components/Classlist';

import styles from './ClassPage.css';
import { WhiteSpace,Tabs,Badge} from 'antd-mobile';
class ClassPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: ''
    }
  }

  componentDidMount() {
  }
  render(){
    let {nowpage,unLearn,hasLearn,finLearn} = this.props;
    const tabs = [
      { title: <Badge text={'3'}>未开始</Badge> },
      { title: <Badge text={'今日(20)'}>进行中</Badge> },
      { title: <Badge dot>已结束</Badge> },
    ];
    return (
        <div className = {styles.page}>
          <Tabs tabs={tabs}
            initialPage={1}
            onChange={(tab, index) => {  }}
            onTabClick={(tab, index) => {  }}
          >
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', backgroundColor: '#f5f5f9' }}>
              {
                unLearn.map((val,key) => {
                  return (
                    <div className = {styles.singlelist} key={key}>
                    <Classlist
                      title = {val.classname}
                      content = {val.brief}
                      bgpic = {val.startpic}
                      id = {val.lecture_id}
                    />
                    </div>
                  );
                })
              }
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', backgroundColor: '#f5f5f9' }}>
              {
                hasLearn.map((val,key) => {
                  return (
                    <div className = {styles.singlelist} key = {key}>
                    <Classlist
                      title = {val.classname}
                      content = {val.brief}
                      bgpic = {val.startpic}
                      id = {val.lecture_id}
                    />
                    </div>
                  );
                })
              }
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', backgroundColor: '#f5f5f9' }}>
            {
                finLearn.map((val,key) => {
                  return (
                    <div className = {styles.singlelist} key = {key}>
                    <Classlist
                      title = {val.classname}
                      content = {val.brief}
                      bgpic = {val.startpic}
                      id = {val.lecture_id}
                    />
                    </div>
                  );
                })
              }
            </div>
          </Tabs>
            <WhiteSpace size='xl' />
            <WhiteSpace size='xl' />
            <WhiteSpace size='xl' />
            <Footer
                wselect = {nowpage}
            />
        </div>
    );
  }
}

ClassPage.propTypes = {
};
function mapStateToProps(state) {
  return {
    nowpage: state.pagedata.nowpage,
    unLearn: state.classrelation.unLearn,
    hasLearn: state.classrelation.hasLearn,
    finLearn: state.classrelation.finLearn
  }
}
export default connect(mapStateToProps)(ClassPage);
